import React from 'react';
import autoBind from 'react-autobind';
import styles from './index.css';

// import Cascader from 'rmc-cascader';
// import 'rmc-cascader/assets/index.css';
// import 'rmc-picker/assets/index.css';
import Cascader from '../../../Common/m-cascader/lib/Cascader';
import '../../../Common/m-cascader/assets/index.css';
import '../../../Common/m-picker/assets/index.css';

export default class RegionPicker extends React.Component {
  constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        }
    }

  render() {
    const { isShow, className, children, extra, 
      data, value, cols, onPickerChange, onClose, onConfirm } = this.props

    return (
      <div  className={`${styles['region-picker']} ${className}`}>
        <div className={styles['region-picker-container']}>
          <div onClick={onClose} style={ isShow ? {display: 'block'} : {display: 'none' }} className={styles['region-picker-mask']}></div>
          <div style={ isShow ? {opacity: 1} : {opacity: 0 }} className={styles['region-picker-body']}> 
            <div className={styles['region-picker-title']}>
              <span onClick={onClose} className={styles['region-picker-cancel']}>取消</span>
              <span onClick={onConfirm} className={styles['region-picker-confirm']}>确定</span>
            </div>
            {
              data ? (
                <Cascader 
                  data={data} 
                  value={value} 
                  cols={cols}
                  className={styles['region-picker-cascader']}
                  onChange={onPickerChange} 
                />) : null
            }
            
          </div>
        </div>
        {React.cloneElement(children, { extra: extra })}
      </div>
    );
  }
}